<template>
  <el-card style="margin: 20px;height:100%;">
    <el-form :inline="true">
      <el-form-item label="申请人" style="width: 270px;">
        <el-input placeholder="请输入"
                  v-model="searchUserForm.name" @keydown.enter="loadUser"></el-input>
      </el-form-item>
      <el-form-item label="申请部门" style="width: 290px;">
        <el-select placeholder="请选择"
                   v-model="searchUserForm.department" @keydown.enter="loadUser">
          <el-option label="产品研发部" value="产品研发部"></el-option>
          <el-option label="销售部" value="销售部"></el-option>
          <el-option label="行政部" value="行政部"></el-option>
          <el-option label="财务部" value="财务部"></el-option>
          <el-option label="采购部" value="采购部"></el-option>
          <el-option label="人力资源部" value="人力资源部"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职级" style="width: 290px;">
        <el-select placeholder="请选择"
                   v-model="searchUserForm.level" @keydown.enter="loadUser">
          <el-option label="普通员工" value="普通员工"></el-option>
          <el-option label="主管" value="主管"></el-option>
          <el-option label="经理" value="经理"></el-option>
          <el-option label="总监" value="总监"></el-option>
          <el-option label="总裁" value="总裁"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" style="width: 290px;">
        <el-select placeholder="请选择"
                   v-model="searchUserForm.reviewStatus" @keydown.enter="loadUser">
          <el-option label="待审批" value="待审批"></el-option>
          <el-option label="驳回" value="驳回"></el-option>
          <el-option label="已通过" value="已通过"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadUser">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>


    <hr>
    <el-button type="primary" style="float:left;margin-top:10px;"
               @click="beforeAddUser">➕ 员工转正</el-button>
    <el-dialog v-model="dialog" title="员工转正" width="30%"
               :before-close="handleClose">
      <el-form  label-width="80px" label-position="top">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="工号*">
              <el-input v-model="repairSaveForm.userId" placeholder="请输入工号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="姓名*">
              <el-input v-model="repairSaveForm.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门*">
              <el-select v-model="repairSaveForm.department" placeholder="请输入部门信息">
                <el-option label="产品研发部" value="产品研发部"></el-option>
                <el-option label="销售部" value="销售部"></el-option>
                <el-option label="行政部" value="行政部"></el-option>
                <el-option label="财务部" value="财务部"></el-option>
                <el-option label="采购部" value="采购部"></el-option>
                <el-option label="人力资源部" value="人力资源部"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="职级*">
              <el-select v-model="repairSaveForm.level" placeholder="请选择职级">
                <el-option label="普通员工" value="普通员工"></el-option>
                <el-option label="主管" value="主管"></el-option>
                <el-option label="经理" value="经理"></el-option>
                <el-option label="总监" value="总监"></el-option>
                <el-option label="总裁" value="总裁"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="转正日期*">
              <el-date-picker v-model="repairSaveForm.regularTime" type="datetime" placeholder="请选择日期"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col >
            <el-form-item label="入职日期*">
              <el-date-picker v-model="repairSaveForm.entryTime" type="datetime" placeholder="请选择日期"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col >
            <el-form-item label="备注*" width="100%" height="100%">
              <el-input v-model="repairSaveForm.remark" placeholder="请输入备注信息" >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="repairSave">提交</el-button>
        <el-button @click="handleClose">返回</el-button>
      </template>
    </el-dialog>





    <el-table :data="userArr">
      <el-table-column label="申请人" prop="name" width="80" align="center"></el-table-column>
      <el-table-column label="申请部门" prop="department" align="center">
      </el-table-column>
      <el-table-column label="职级" prop="level" align="center">
      </el-table-column>
      <el-table-column label="入职日期" prop="entryTime" align="center"></el-table-column>
      <el-table-column label="转正日期" prop="regularTime" align="center"></el-table-column>
      <el-table-column label="状态" align="center">
        <template #default="{row}">
          {{ statusMap[row.reviewStatus] || row.reviewStatus }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template #default="scope">
          <el-button type="primary" link
                     @click="auditing(scope.row.id)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!---->
    <el-dialog  title="流程表单" v-model="dialogVisible">
      <el-descriptions direction="horizontal" :column="2" border>
        <el-descriptions-item label="姓名">{{searchUserForm.name}}</el-descriptions-item>
        <el-descriptions-item label="部门">{{searchUserForm.department}}</el-descriptions-item>
        <el-descriptions-item label="职级">{{searchUserForm.level}}</el-descriptions-item>
        <el-descriptions-item label="入职日期">{{searchUserForm.entryTime}}</el-descriptions-item>
        <el-descriptions-item label="转正日期">{{searchUserForm.regularTime}}</el-descriptions-item>
        <el-descriptions-item label="备注">{{searchUserForm.remark}}</el-descriptions-item>
        <template #footer>
          <el-button @click="handleClose">返回</el-button>
        </template>
      </el-descriptions>
    </el-dialog>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";


// 定义映射关系
const departmentMap = { '1': '研发部', '2': '业务销售部' };
const positionMap = { '10': '熬夜冠军', '20': '游戏大师', '30': '肥仔', '40': '机器人', '50': '人机'};
const statusMap = { '1': '待审批', '2': '已拒绝', '3': '已通过' };
//定义弹窗是否出现
const dialog = ref(false);
//获取当前登录的用户数据
const user = ref(getUser());
//定义弹窗是否出现
const dialogVisible = ref(false);
//定义弹窗关闭的方法
const handleClose = () => {
  if(confirm('您是否要关闭本弹窗?')){
    dialog.value = false;
    dialogVisible.value = false;
  }
}
//定义可选数组的方法
const loadLeader = ()=>{};
//定义加载数据表单的方法
const loadUser = () => {
  let data = qs.stringify(searchUserForm.value);
  axios.get(BASE_URL+'/v1/personnel/select?'+data)
      .then((response)=>{
        if (response.data.code == 2000) {
          userArr.value = response.data.data;
          console.log(userArr.value);
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}
//查询数据
const searchUserForm = ref({
  name:'',
  department:'',
  level:'',
  reviewStatus:'',
  regularTime:'',
  entryTime:'',
  type:'转正'
});
const userArr = ref([]);
//一进到页面立即加载所有数据
onMounted(()=>{
  loadUser();
})
//定义重置搜索的方法
const resetSearch = () => {
  searchUserForm.value = {
    name:'',
    department:'',
    level:'',
    reviewStatus:'',
    regularTime:'',
    entryTime:'',
    type:'转正'
  };
  loadUser();
}


//编辑点击查看详情的方法
const auditing = (id)=>{
  dialogVisible.value = true;
  axios.get(BASE_URL+'/v1/personnel/select?id='+id).then((response)=>{
    if (response.data.code == 2000) {
      searchUserForm.value = response.data.data[0];
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//定义点击添加员工转正的方法
const beforeAddUser = ()=>{
  dialog.value = true;
};


const repairSaveForm= ref({
  userId:'',
  name:'',
  department:'',
  level:'',
  regularTime:'',
  entryTime:'',
  remark:'',
  type:'转正'
});
const repairSave = ()=>{
  if (!repairSaveForm.value.userId){
    ElMessage.error('请输入工号!');
    return;
  }
  if(!repairSaveForm.value.name || repairSaveForm.value.name.trim()==''){
    ElMessage.error('请输入员工名字!');
    return;
  }
  if (!repairSaveForm.value.department){
    ElMessage.error('请输入部门!');
    return;
  }
  if (!repairSaveForm.value.level){
    ElMessage.error('请输入职级!');
    return;
  }
  if (!repairSaveForm.value.regularTime){
    ElMessage.error('请输入转正日期!');
    return;
  }
  if (!repairSaveForm.value.entryTime){
    ElMessage.error('请输入入职日期!');
    return;
  }
  if (!repairSaveForm.value.remark){
    ElMessage.error('请输入备注!');
    return;
  }
  console.log(repairSaveForm.value);
  let data = repairSaveForm.value;
  axios.post(BASE_URL+'/v1/personnel/insert/',data).then((response)=>{
    if(response.data.code == 2000){
      ElMessage.success('提交成功!');
      dialog.value = false;//关闭弹窗
      repairSaveForm.value = {
        userId:'',
        name:'',
        department:'',
        level:'',
        regularTime:'',
        entryTime:'',
        remark:'',
        type:'转正'
      };//清空表单
      resetSearch();//新增成功后,需要重新加载数据!
    }else{
      ElMessage.error('请确认信息是否录入完毕!');
    }
  })
}
</script>

<style>

</style>